<template>
	<view class="conent">
		<u-navbar :is-back="false" :safeAreaInsetTop="false" height="180rpx">
		</u-navbar>
		<view class="conent_box">
			<u-swiper :list="swiperList" imgMode="widthFix" height="200" previousMargin="10" nextMargin="10" circular indicator
				indicatorMode="dot" bgColor="#fff"></u-swiper>
			<view class="message">
				<u-row
					customStyle="margin: 30rpx 20rpx;padding:20rpx;line-height:40rpx;background: #fff;box-shadow: -2px  -2px  4px  rgba(0,0,0, .3);border-radius: 10rpx;">
					<u-col span="3">
						<u--text text="动态"
							prefixIcon="https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/icon/message.png"
							iconStyle="font-size: 19px;color:#4AB06F;margin-right:10rpx;" bold size="18"
							color="#4AB06F"></u--text>
					</u-col>
					<u-col span="9">
						<swiper style="height: 42rpx;" :circular="true" :vertical="true" :autoplay="true"
							interval="3000" duration="1000">
							<swiper-item v-for="(item,index) in noticeList" :key="index" @click="handleInfo(item.id)">
								<u--text :text="item.title" align="left" lines="1" size="13" color="#8B968E"></u--text>
							</swiper-item>
						</swiper>
					</u-col>
				</u-row>
			</view>

			<view class="nav">
				<u-grid :border="false" col="4" @click="navOption">
					<u-grid-item v-for="(item,index) in navList" :key="index">
						<u--image :showLoading="true" :src="item.imageUrl" width="32px" height="32px"
							radius="50%"></u--image>
						<u--text :text="item.title" align="center" size="12" color="#000"
							customStyle="margin-top:10rpx;"></u--text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>

			<view class="hive">
				<view class="environment">
					<u--image :src="environmentImage" width="100%" height="160" radius="20"></u--image>
				</view>
				<view class="card">
					<u--image :src="guaranteeImage" width="100%" height="27"></u--image>
					<view class="honey">
						<view class="honeyNav">
							<view class="item" v-for="(item,index) in honeyNav" :key="index"
								@click="chooseHoney(item.title,index)">
								<u--text :text="item.title" :bold="index==checkedHoney"
									:size="index==checkedHoney?'20':'14'"
									:color="index==checkedHoney?'#2D5150':'#B0B0B0'" lineHeight="30"
									customStyle="z-index:9;"></u--text>
								<view v-show="index==checkedHoney"
									style="position: absolute;top: 30rpx; width: 100rpx;border: 16rpx solid #FFEC45;border-radius: 40rpx 0; background-color: #FFEC45;">
								</view>
							</view>
						</view>
						<u-list v-if="honeyList.length>0" @scrolltolower="scrolltolower">
							<u-list-item v-for="(item, index) in honeyList" :key="index">
								<u-row customStyle="margin-top: 40rpx;">
									<u-col span="5">
										<u--image :src="item.imageUrl" width="120" height="120"
											radius="20rpx"></u--image>
									</u-col>
									<u-col span="7">
										<u-row>
											<u-col span="3">
												<!-- <u--text :text="item.number+'号'" size="10" color="#000"
													customStyle="background:#FFEC45;padding: 0 10rpx;border-radius:10rpx;"></u--text> -->
												<u--text :text="item.hiveName" size="10" color="#000" lines="1"
													customStyle="background:#FFEC45;padding: 0 10rpx;border-radius:10rpx;"></u--text>
											</u-col>
											<u-col span="9">
												<u--text :text="item.apiaryName" size="18" bold lines="1"
													color="#000"></u--text>
											</u-col>
										</u-row>
										<!-- <u-line-progress :percentage="item.percentum" activeColor="#C4FFEF" height="20">
											<text
												style="color: #333;font-size: 14rpx;text-align: left;">已认购{{item.percentum}}%</text>
										</u-line-progress> -->
										<!-- <u--text :text="'已有'+item.peopleNumber+'人参与'" prefixIcon="account"
											iconStyle="font-size: 24px;color:#B0B0B0;margin-right:10rpx;" size="14"
											lineHeight="30" color="#B0B0B0"></u--text> -->
										<!-- <u--text :text="'认养周期：'+item.period+'月'" size="14" lineHeight="30"
											color="#333"></u--text> -->
										<u-text :text="'蜜蜂心情:'+beeStateList[item.beeState-1]" size="14px"
											color="#ff0000" bold lineHeight="60rpx"></u-text>
										<!-- <u-row>
											<u-col span="4">
												<u-text text="蜜蜂心情:" size="28rpx"
													color="#ff0000" bold lineHeight="60rpx"></u-text>
											</u-col>
											<u-col span="8">
												<u-text :text="beeStateList[item.beeState-1]" size="28rpx"
													color="#ff0000" bold lineHeight="60rpx"></u-text>
											</u-col>
										</u-row> -->
										<u-row v-if="checkedHoney==0"
											customStyle="border-radius:70rpx;height:70rpx;background:#C4FFEF;line-height:70rpx;padding:0 0 0 20rpx;">
											<u-col span="8">
												<u--text :text="'￥'+item.price+'/'+item.period+'月'" size="16" bold
													color="#000"></u--text>
											</u-col>
											<!-- <u-col span="2">
												<u--text :text="'/'+item.period+'月'" size="10" bold
													color="#333"></u--text>
											</u-col> -->
											<u-col span="4">
												<u-button text="认养" size="16" :hairline="false" shape="circle"
													color="#fff"
													customStyle="background:#07BFA5;border:none;font-weight:800;"
													@click="hiveFoster(item,checkedHoney)"></u-button>
											</u-col>
										</u-row>
										<u-row v-if="checkedHoney==1"
											customStyle="border-radius:70rpx;height:70rpx;background:#C4FFEF;line-height:70rpx;padding:0 0 0 20rpx;">
											<u-col span="6">
												<u--text :text="'￥'+item.price+'/'+item.period+'月'" size="16" lines="1"
													bold color="#000"></u--text>
											</u-col>
											<!-- <u-col span="2">
												<u--text :text="'/'+item.period+'月'" size="10" bold
													color="#333"></u--text>
											</u-col> -->
											<u-col span="6">
												<u-button text="查看详情" size="16" :hairline="false" shape="circle"
													color="#fff"
													customStyle="background:#07BFA5;border:none;font-weight:800;"
													@click="hiveFoster(item,checkedHoney)"></u-button>
											</u-col>
										</u-row>
									</u-col>
								</u-row>
							</u-list-item>
						</u-list>
						<view v-else class="honeyNull">
							<u--image
								src="https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/shopNull.png"
								customStyle="margin:auto;"></u--image>
							<u--text text="列表空空如也" align="center" color="#8991A4"></u--text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		banner
	} from "@/api/pages/events.js"
	import {
		awaitList,
		myList,
		introduceTitle
	} from "@/api/pages/hive.js"
	import {
		trendsList,
		trendsTitle
	} from "@/api/pages/trend.js"
	import router from '@/api/router';
	const swiperList = ref([])
	const noticeList = ref([])
	const navList = ref([{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/introduce.png",
			title: "认养介绍",
			url: '/pageA/events/detail'
		},
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/privilege.png",
			title: "认养特权",
			url: '/pageA/events/detail'
		},
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/game.png",
			title: "蜜蜂游戏",
			url: ''
		},
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/foster.png",
			title: "蜂箱认养",
			url: '/pages/index/index'
		}
	])
	const environmentImage = ref("https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/environment.png")
	const guaranteeImage = ref("https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/guarantee.png")
	const honeyNav = ref([{
			title: "蜂箱认养"
		}
		// ,
		// {
		// 	title: "我的蜂箱"
		// }
	])
	const checkedHoney = ref("0") //0蜂箱认养；1我的蜂箱
	const honeyFrom = ref({
		pageNo: 1,
		pageSize: 10
	})
	const chooseHoney = (title, index) => {
		console.log(title, index);
		checkedHoney.value = index
		honeyFrom.value.pageNo = 1
		honeyList.value = []
		index ? getMyList(honeyFrom.value) : getHive(honeyFrom.value)
	}
	const honeyList = ref([])
	const beeStateList = ref([
		'今天我去蜜蜂采蜜去喽',
		'今天有雨，我在家休息一下',
		'今天天气好热啊，主人你什么时候来看看我',
		'今天蜂蜜成熟了，主人记得过来摇蜜哦',
		'今天流蜜很丰富，请开视频看看我'
	])
	onMounted(() => {
		getBanner(1)
		getTrend()
		getHive(honeyFrom.value);
	})
	const getBanner = async (i) => {
		const res = await banner(i).then()
		swiperList.value = res.result
	}
	const getTrend = async () => {
		const res = await trendsList({
			"pageSize": 999
		}).then()
		noticeList.value ? noticeList.value = noticeList.value.concat(res.result) : noticeList.value = res
			.result
		console.log("res---", noticeList.value);
	}
	const handleInfo = (id) => {
		console.log(id);
		router.navigateTo({
			url: '/pageA/events/dynamic?id=' + id
		})
	}
	const navOption = (name) => {
		if (navList.value[name].url == '') {
			uni.showToast({
				title: '服务未开通',
				icon: 'error',
			})
			return
		}
		router.navigateTo({
			url: navList.value[name].url + '?title=' + navList.value[name].title
		})
	}
	const scrolltolower = () => {
		honeyFrom.value.pageNo++
		getHive(honeyFrom.value);
		console.log(honeyFrom.value.pageNo);
	}
	const getHive = async (honeyFrom) => {
		const res = await awaitList(honeyFrom).then()
		// honeyList.value ? honeyList.value = honeyList.value.concat(res.result.records) : honeyList.value = res
		// 	.result.records
		honeyList.value = honeyList.value ? honeyList.value.concat(res.result.records) : res.result.records
		console.log("res---", res);
	}
	const getMyList = async (honeyFrom) => {
		const res = await myList(honeyFrom)
		honeyList.value = honeyList.value ? honeyList.value.concat(res.result.records) : res.result.records
		console.log("res---", res);
	}
	const hiveFoster = (item, checkedHoney) => {
		console.log(item, checkedHoney);
		router.navigateTo({
			url: '/pageA/hive/foster?hiveDate=' + JSON.stringify(item) + '&checkedHoney=' + checkedHoney
		})
	}
</script>

<style lang="scss" scoped>
	.conent_box {
		margin-top: 180rpx;
		.hive {
			padding: 40rpx 10rpx;
			position: relative;
			top: 0;

			.environment {
				width: 730rpx;
				height: 320rpx;
			}

			.card {
				position: absolute;
				top: 100rpx;
				left: 4%;
				width: 90%;
				padding: 10rpx;
				padding-bottom: 60rpx;
				border-radius: 20rpx;
				background-color: #fff;

				.honey {
					padding: 30rpx 20rpx 80rpx 20rpx;

					.honeyNav {
						display: flex;

						.item {
							margin-right: 20rpx;
							position: relative;
						}
					}

					.honeyNull {
						margin: 20rpx;
						padding: 20rpx;
						// border-radius: 40rpx;
						// box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
						background: #fff;
					}
				}
			}
		}
	}
</style>